import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link } from 'react-router';
import {  message,Table,Dropdown,Menu,Button,Input ,Row,Col,Select,Popconfirm} from 'antd';
const Search = Input.Search;
const Option = Select.Option;
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';
import api from '../api';
import moment from 'moment';
import {bind_change} from '../common/State';

import {RAISE_STATUS} from '../constants/index';


export default class GainGuest extends React.Component {
    constructor(props, context){
        super(props, context);
        this.state={
           page:1,
           total:1,
           pageSize:10,
           list:[],
           search:{},
           loading:true,
        };
    }

    componentWillMount(){
        this.doFetch();
    }
    componentWillReceiveProps(nextProps){
        
    }
    async doFetch(page=1){
      let {search} = this.state;

      let result = await api('/generalize/gainGuest/list',{...search,page});

      if(result.cd!=0){
        message.error(result.msg);
        this.setState({loading:false})
        return;
      }
      this.setState({
          page,
          total:result.total,
          list:result.data,
          loading:false
      })
    }

    doSearch(){
      this.setState({
        loading:true
      })
      this.doFetch();
    }

    //分页
    toPage({current:page,pageSize,total}){
      this.setState({loading:true})
      this.doFetch(page);
    }
   
    render() {
        var {list, page,total,pageSize,loading}=this.state;
        return (
            <div >
                <NavBar navs={[{title:'获客管理'}]} />
                <ContentBody className='container'>
                  <div className='search-panel'>
                      <Row gutter={16}>
                        <Col span={8}>
                          <label>用户昵称:</label>
                          <Input 
                            {...this::bind_change('search.nick_name')} 
                            placeholder="请输入用户昵称" 
                          />
                        </Col>
                        <Col span={8}>
                          <label>渠道名称:</label>
                          <Input 
                            {...this::bind_change('search.introducer_name')} 
                            placeholder="请输入渠道名称" 
                          />
                        </Col>
                        <Col span={8}>
                          <label>用户手机号:</label>
                          <Input 
                            {...this::bind_change('search.phone')} 
                            placeholder="请输入用户手机号" 
                          />
                        </Col>
                      </Row>
                      
                      <div className='marginT20 text-center'>
                         <Button type="primary" onClick={this.doSearch.bind(this)} icon="search">查询</Button>
                         <Button 
                            type="primary" 
                            className='marginL20' 
                            onClick={()=>{
                              this.setState({
                                search:{}
                              })
                            }} 
                          >
                          重置
                          </Button>
                      </div>
                  </div>


                  <Table 
                    bordered
                    columns={this.getColumns()} 
                    simple 
                    dataSource={list}
                    pagination={{
                      current:page,
                      total,
                      pageSize,
                      showQuickJumper : true
                    }}
                    loading={loading}
                    onChange={this.toPage.bind(this)}
                    scroll={{ x: 1000 }}
                    rowKey={(record,index) => {
                      return index;
                    }}
                  />
                </ContentBody>
                  
            </div>
        );
    }

    getColumns(){

      let columns = [
            {
              title: '用户编号',
              dataIndex: 'user_no',
              key: 'user_no',
            }, {
              title: '用户昵称',
              dataIndex: 'nick_name',
              key: 'nick_name',
            }, {
              title: '用户手机号',
              dataIndex: 'phone',
              key: 'phone'
            },{
              title: '注册时间',
              dataIndex: 'created_at',
              key: 'created_at'
            },{
              title: '项目借款额度',
              dataIndex: 'amount',
              key: 'amount'
            },{
              title: '实际借款额度',
              dataIndex: 'cur_amount',
              key: 'cur_amount'
            },{
              title: '项目名称',
              dataIndex: 'projectName',
              key: 'projectName'
            },{
              title: '项目状态',
              dataIndex: 'projectStatus',
              key: 'projectStatus',
              render:(projectStatus,record) => {
                return RAISE_STATUS[projectStatus]
              }
            },{
              title: '渠道姓名',
              dataIndex: 'introducerName',
              key: 'introducerName'
            },{
              title: '渠道手机号',
              dataIndex: 'introducerPhone',
              key: 'introducerPhone'
            }
        ];

        return columns
    }
}

GainGuest.contextTypes= { router: React.PropTypes.object.isRequired};

